<template>
  <div>
    <router-view></router-view>
    <div class="home">
      <RouterLink to="/home/interview"><div class="item">面经</div></RouterLink>
      <RouterLink to="/home/collect"><div class="item">收藏</div></RouterLink>
      <RouterLink to="/home/like"><div class="item">点赞</div></RouterLink>
      <RouterLink to="/home/my"><div class="item">我的</div></RouterLink>
    </div>
  </div>
</template>

<script>
export default {
  name: "HmHome",
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  background-color: #fff;
  position: fixed;
  //定位到屏幕下方
  bottom: 0;
  display: flex;
  justify-content: space-between;
  .item {
    background-image: url(../assets/item.png);
    //将背景图大小设置为宽40px，高40px，位置居中靠上
    background-size: 30px 30px;
    background-position: center top;
    background-repeat: no-repeat;
    color: #333;
    display: flex;
    align-items: end;
    justify-content: center;
    width: 60px;
    height: 60px;
  }
}
</style>
